// jquery  ---> $    jquery.prototype ---> $.fn  
// $('div').addClass();  jquery对象可以使用原型中所有方法 
// 我们希望拓展jq的功能，本质上就给jquery.prototype添加方法 $.fn 
// 瀑布流的布局规则：
// 每张图片在布局之前先找 高度最小列， 向最小列进行追加 
// 当前布局图片
// left: 最小列left值    
// 每一列的left值 = 当前列的索引值 * （宽度 + 边距）
// top: 最小列的列高 + 边距
$.fn.waterFall = function () {
	//准备工作
	var  gap = 10; //边距
	var  width = 230; //列宽
	var  column =[0, 0, 0, 0, 0];//记录每一列的列高	
	
	var  imgs = this.children(); //获取页面中所有item标签，进行瀑布
	console.log(imgs);

	//逐一对每个item盒子进行定位 [div,div,div,div]
	imgs.each(function (index, ele) { // ele 当前遍历DOM对象， index当前元素索引
		//1-先找出当前的最小列
		var min = column[0];
		var minKey = 0;
		for (var i = 0; i < column.length; i++ ) {
			if (min > column[i]) {
				min = column[i]; //记录列高最小值
				minKey = i;//记录最小列索引值 
			}
		}
		//2-根据列高，对当前遍历图片进行定位
		$(ele).css({
			left: minKey * (width + gap), // 当前列的索引值 * （宽度 + 边距）
			top: min + gap  //最小列的列高 + 边距
		})
		
		//3-更新当前列的列高
		column[minKey] += $(ele).height() + gap;
	})

	//找出高亮最高的列，把高度设置给 items 
	var max = column[0];
	column.forEach(function (v, i, arr) {  //v 当前遍历元素 i 当元素的索引值  arr 被遍历的数组-->column
		if (max < v) {
			max = v;
		}
	});

	//把高度设置给 items 
	this.height(max);

	console.log(column);
}